<template>
	<view class="content">
		<!--顶部标签-->
		<view class="content_1">
			<view class="tab_view">
				<view class="tab_box" @click="changeTab(1)">
					<view :class="choosetab == 1 ? 'tab_name' : 'tab_name_none'">信息大厅</view>
					<image class="tab_icon" src="../../../../static/mine/downjiantou.svg"></image>
				</view>
				<view class="tab_box" @click="changeTab(2)">
					<view :class="choosetab == 2 ? 'tab_name' : 'tab_name_none'">已购信息</view>
					<image class="tab_icon" src="../../../../static/mine/downjiantou.svg"></image>
				</view>
			</view>
		</view>
		<!--账单详细-->
		<block v-for="(data, index) in orderList" :key="index">
			<view class="content_2" v-on:click.stop="toPay(index, 'orderList')">
				<view class="line_2"></view>
				<view class="detail_view">
					<view class="detail_box">
						<view class="detail_left">发布时间：{{data.time}}</view>
						<view class="detail_right">租金：{{data.rentMoney}}</view>
					</view>
					<view class="detail_box">
						<view class="detail_left">小区名称：{{data.house_name}}</view>
						<view class="detail_right">租期：总{{data.rentTime}}</view>
					</view>
					<view class="detail_locate" v-on:click.stop="Address(index, 'orderList')">
						<view class="click_locate">定位：可点击放大查看</view>
						<image class="locate_icon" src="../../../../static/index/detail/location_icon.svg"></image>
					</view>
					<view class="detail_money">￥{{data.money}}</view>
					<view class="detail_line"></view>
					<view class="detail_userinfo">
						<view class="user_name">姓名：{{data.customer_name}}</view>
						<view class="user_phone">电话：{{data.customer_phone}}</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {Request} from '../../../../utils/request.js';
	const app = getApp();
	export default {
		data() {
			return {
				choosetab: 1,
				orderList: [],
			}
		},
		methods: {
			//Address
			Address:function(index, arr){
				let that = this;
				const latitude = parseFloat(that[arr][index].latitude);
				const longitude = parseFloat(that[arr][index].longitude);
				const name = that[arr][index].house_name;
				const address = that[arr][index].house_address;
				uni.openLocation({
					name: name,
					address: address,
				    latitude: latitude,
				    longitude: longitude,
				});
			},
			//跳转支付页面
			toPay: function(index, arr){
				let PushId = this[arr][index].id;
				if(this.choosetab == 1){
					uni.showModal({
					    title: '提示',
					    content: '前往购买，查看详情',
					    success: (res) => {
					        if (res.confirm) {
					            new Request('customer/push/Create_Push_Order/CreateOrder').request(
					            	()=>{
					            		return 'POST'
					            	},
					            	()=>{
					            		return {
					            			openid: app.globalData.openid,
					            			push_id: PushId,
					            		}
					            	},
					            	(res)=>{
					            		if(res.data.code == 0){
					            			new Request().showToast(res.data.msg);
					            			return;
					            		}
					            		let order_id = res.data.order_id
					            		uni.navigateTo({
					            		    url: '/pages/mine/push/boos/pay/pay?order_id=' + order_id,
					            		});
					            	}
					            );
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				} else {
					uni.navigateTo({
					    url: '/pages/mine/push/boos/pushDetail?push_id=' + PushId,
					});
				}
			},
			//tab切换
			changeTab: function(id) {
				this.choosetab = id
				if(id == 1) {
					this.show();
				}
				if(id == 2) {
					this.buy();
				}
			},
			show:function(){
				//获取发布信息列表
				new Request('customer/push/Get_Push_List/GetCustomerPushList').request(
					()=>{
						return 'POST'
					},
					()=>{
						return {
							openid: app.globalData.openid,
						}
					},
					(res)=>{
						if(res.data.code == 0){
							new Request().showToast(res.data.msg);
							return;
						}
						if (res.data.code == 1) {
							this.orderList = res.data.data
							this.orderList = this.orderList.map((item, index) =>{
								return {
									id: item.id,
									time: item.time,
									order_sn: item.createtime,
									text: item.text == '' ? '无' : item.text,
									customer_name: '***',
									customer_phone: '***********',
									rentMoney: item.rent_money_start + '-' + item.rent_money_end,
									//租期
									rentTime: item.rentTime, 
									//小区名称
									house_name: item.house_name,
									longitude: item.longitude,
									latitude: item.latitude,
									house_name: item.house_name,
									house_address: item.house_address,
									//支付金额
									money: item.money,
								}
							});
						}
					}
				)
			},
			//获取已购信息表
			buy:function(){
				new Request('customer/push/Get_Push_List/GetBuyPushList').request(
					()=>{
						return 'POST'
					},
					()=>{
						return {
							openid: app.globalData.openid,
						}
					},
					(res)=>{
						if(res.data.code == 0){
							new Request().showToast(res.data.msg);
							this.orderList = [];
							return;
						}
						if (res.data.code == 1) {
							this.orderList = res.data.data
							this.orderList = this.orderList.map((item, index) =>{
								return {
									id: item.id,
									time: item.paytime,
									order_sn: item.createtime,
									text: item.text == '' ? '无' : item.text,
									customer_name: item.user_name,
									customer_phone: item.user_phone,
									
									rentMoney: item.rent_money_start + '-' + item.rent_money_end,
									//租期
									rentTime: item.rentTime, 
									//小区名称
									house_name: item.house_name,
									longitude: item.longitude,
									latitude: item.latitude,
									house_address: item.house_address,
									//支付金额
									money: item.money,
								}
							})
							console.log(this.orderList)
						}
					}
				)
			}
		},
		onShow(){
			this.choosetab = 1;
			this.show();
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content {
		padding-bottom: 190upx;
	}

	/*
		顶部标签样式
	*/
	.content_1 {
		margin-top: 40upx;
		padding-left: 40upx;
	}

	.tab_view {
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		
	}

	.tab_box {
		height: 40upx;
		display: flex;
		align-items: center;
		margin-right: 80upx;
	}

	.tab_name {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #B3E9DC;
		margin-right: 10upx;
	}

	.tab_name_none {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #666666;
		margin-right: 10upx;
	}

	.tab_icon {
		height: 28upx;
		width: 28upx;
	}

	/**
	 * 账单详细样式
	 */

	.order_view {
		margin-top: 30upx;
		display: flex;
		flex-direction: column;
	}

	.line_2 {
		height: 20upx;
		background-color: #FFFFFF;
		margin-top: 30upx;
		margin-bottom: 30upx;
	}

	.order_box {
		height: 80upx;
		padding: 0upx 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.detail_name {
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		color: #999999;
	}

	.detail {
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		color: #999999;
	}
	/* 操作按钮 */
	.operate_button{
		display: flex;
		justify-content: flex-end;
		font-size: 28upx;
		padding: 0upx 40upx;
	}
	.operate_edit{
		color: orange;
		margin: 10upx;
	}
	.operate_buy{
		color: #5EC7CB;
		margin: 10upx 0 10upx 10upx;
	}
	
	.detail_view{
		height: 350upx;
		padding: 30upx 25upx;
		background-color: #FFFFFF;
		border: solid 1upx #2d2d2d;
		margin: 0 15upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.detail_box{
		height: 50upx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.detail_left{
		height: 50upx;
		line-height: 50upx;
		font-size: 26upx;
		color: #000000;
	}
	
	.detail_right{
		height: 50upx;
		line-height: 50upx;
		font-size: 26upx;
		color: #000000;
	}
	
	.detail_locate{
		height: 50upx;
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.click_locate{
		font-size: 26upx;
		color: #000000;
		margin-right: 25upx;
	}
	
	.locate_icon{
		height: 35upx;
		width: 35upx;
	}
	
	.detail_userinfo{
		height: 50upx;
		width: 100%;
		display: flex;
	}
	
	.user_name{
		height: 50upx;
		line-height: 50upx;
		font-size: 26upx;
		color: #000000;
		margin-right: 200upx;
	}
	
	.user_phone{
		height: 50upx;
		line-height: 50upx;
		font-size: 26upx;
		color: #000000;
	}
	
	.detail_money{
		height: 100upx;
		width: 100%;
		font-size: 68upx;
		align-items: center;
		font-weight: bold;
		text-align: right;
	}
	
	.detail_line{
		height: 1upx;
		width: 100%;
		background-color: #2d2d2d;
	}
</style>
